<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<link rel="stylesheet" href="../assets/css/zpui.css"/>
<link rel="stylesheet" href="../assets/css/all.css"/>
<script src="../assets/js/page.js"></script>

    <title> 行情 </title>
</head>
<body>
<div class="page fs28">
    <div class="page-hd">
        <div class="header" style="background-color: rgba(42,33,69,.3);">
            <div class="header-left">
                <a href="javascript:history.go(-1)" class="left-arrow"></a>
            </div>
            <div class="header-title">行情</div>
            <div class="header-right">
                <a href="#"></a>
            </div>
        </div>
    </div>
    <div class="page-bd" style="padding-bottom: .2rem;display: flex;">
        <div class="weui-cells before-after-none hangqing-bd" style="flex: 1;">
            <div class="weui-cells__title">
                <span style="text-align: left;">币种</span>
                <span>最新价</span>
                <span>24H涨跌</span>
            </div>
            <div id="quotes_box" class="weui-cells__tips list-cells">

            </div>
        </div>
    </div>

<div class="bottom-tabbar">
    <a href="首页.html" class="bottom-tabbar__item ">
            <span class="icon">
                <img src="../assets/images/bottom_icon01.png" />
                <img class="lhimg" src="../assets/images/bottom_icon01_lh.png" />
            </span>
        <p class="label">首页</p>
    </a>
    <a href="行情.html" class="bottom-tabbar__item active">
            <span class="icon">
                <img src="../assets/images/bottom_icon02.png" />
                <img class="lhimg" src="../assets/images/bottom_icon02_lh.png" />
            </span>
        <p class="label">行情</p>
    </a>
    <a href="个人中心.html" class="bottom-tabbar__item ">
            <span class="icon">
                <img src="../assets/images/bottom_icon03.png" />
                <img class="lhimg" src="../assets/images/bottom_icon03_lh.png" />
            </span>
        <p class="label">我的</p>
    </a>
</div>
</div>

<script src="../assets/js/lib/jquery-2.1.4.js"></script>
<script src="../assets/js/jquery-weui.min.js"></script>
<script src="/static/js/art-template.js"></script>

<script type="text/html" id="quotes_tmp">
    <div id="quotes_{{symbol}}" data-changePercent24Hr="{{changePercent24Hr}}" class="weui-cell">
        <div class="weui-cell__hd">
        <img src="../assets/images/img6.png" alt="">
        <div class="text1 fs30 text-white">
            {{symbol}}
        </div>
        </div>
        <div class="weui-cell__bd" style="text-align: right;">
        <p class="fs30 text-white priceUsd">${{priceUsd}}</p>
    <p class="fs26 vwap24Hr" style="color: #81879a;">${{vwap24Hr}}</p>
    </div>
        <div class="weui-cell__ft">
            <span class="text-{{changePercent24Hr>0?'red':'green'}} fs28 changePercent24Hr">{{changePercent24Hr}}%</span>
        </div>
    </div>
</script>

<script type="text/javascript">
    var ws;
    // 连接服务端
    function connect() {
        var domain = document.domain;
        // 创建websocket
        ws = new WebSocket("ws://"+domain+":2346");
        ws.onopen = onopen;
        // 当有消息时根据消息类型显示不同信息
        ws.onmessage = onmessage;
        ws.onclose = function() {
            console.log("连接关闭，正在重新连接");
            connect();
        };
        ws.onerror = function() {
            console.log("出现错误");
        };
    }
    // 服务端发来消息时
    function onmessage(e) {
        console.log(e.data);
        if (e.data != 'success'){
            var res = $.parseJSON( e.data );
            $.each(res.data,function(i,v){
                v.changePercent24Hr = parseFloat(v.changePercent24Hr).toFixed(2);
                v.priceUsd = parseFloat(v.priceUsd).toFixed(2);
                v.vwap24Hr = parseFloat(v.vwap24Hr).toFixed(2);
                var obj = $('#quotes_'+v.symbol);
                if (obj.length < 1){
                    $('#quotes_box').append(template('quotes_tmp',v));
                }else if($('#quotes_box').data('changePercent24Hr') != v.changePercent24Hr){
                    obj.find('.priceUsd').html('$'+v.priceUsd);
                    obj.find('.vwap24Hr').html('$'+v.vwap24Hr);
                    obj.find('.changePercent24Hr').html(v.changePercent24Hr+'%');
                    if (v.changePercent24Hr >=0){
                        obj.find('.changePercent24Hr').addClass('text-red').removeClass('text-green');
                    }else{
                        obj.find('.changePercent24Hr').addClass('text-green').removeClass('text-red');
                    }
                }
            })

        }
    };
    // 连接建立时发送信息
    function onopen()
    {
        console.log("连接成功");
        ws.send('{"type":"login"}');
    }
    connect();
</script>
</body>
</html>